<template>
    <div class="app-container">
        <h5 class="titleInfo">
            快速预约
        </h5>
        <div class="content">
            <el-steps :active="active" finish-status="success">
                <el-step title="预约信息"></el-step>
                <el-step title="客户信息"></el-step>
                <el-step title="其他信息"></el-step>
            </el-steps>
            <el-form ref="form" class="form" :inline="true" :model="form" label-width="130px">
                <div v-if="active==1">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="预约时间" width="236">
                                <el-date-picker
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    v-model="dates"
                                    type="daterange"
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="预约地址">
                                <el-select placeholder="请选择省" v-model="val">
                                    <el-option label="1" value="1"></el-option>
                                    <el-option label="2" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="预约地址">
                                <el-select placeholder="请选择市" v-model="val">
                                    <el-option label="1" value="1"></el-option>
                                    <el-option label="2" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="预约医院">
                                <el-select placeholder="请选择" v-model="val">
                                    <el-option label="1" value="1"></el-option>
                                    <el-option label="2" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="预约项目">
                                <el-select placeholder="请选择" v-model="val">
                                    <el-option label="1" value="1"></el-option>
                                    <el-option label="2" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="一级分类">
                                <el-select placeholder="请选择" v-model="val">
                                    <el-option label="1" value="1"></el-option>
                                    <el-option label="2" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="二级分类">
                                <el-select placeholder="请选择" v-model="val">
                                    <el-option label="1" value="1"></el-option>
                                    <el-option label="2" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="三级分类">
                                <el-select placeholder="请选择" v-model="val">
                                    <el-option label="1" value="1"></el-option>
                                    <el-option label="2" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="预约类型">
                                <el-select placeholder="请选择" v-model="val">
                                    <el-option label="1" value="1"></el-option>
                                    <el-option label="2" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <div v-if="active==2">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="客户姓名">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="客户手机">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="验证码">
                                <el-input></el-input>
                            </el-form-item>
                            <el-button type="primary">获取验证码</el-button>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="年龄">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="性别">
                                <el-select placeholder="请选择" v-model="val">
                                    <el-option label="1" value="1"></el-option>
                                    <el-option label="2" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="职业">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <div v-if="active==3">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="性格特点">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="用户关注">
                                <el-select placeholder="请选择" v-model="val">
                                    <el-option label="1" value="1"></el-option>
                                    <el-option label="2" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="曾咨询医院">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="曾做过的项目">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="经济自主权">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="经济实力">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="预期消费">
                                <el-select placeholder="请选择" v-model="val">
                                    <el-option label="1" value="1"></el-option>
                                    <el-option label="2" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="铺垫项目">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="铺垫程度">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="备注">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
            <div style="margin-top:60px">
                <el-button v-show="active==3||active==2" @click="prev">上一步</el-button>
                <el-button v-show="active!=3" @click="next">下一步</el-button>
                <el-button v-show="active==3" @click="submitFn">提交</el-button>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
        name:"subscribeFast",
        data() {
            return {
                val:"1",
                active: 1,
                dates:"",
                form:{}
            };
        },

        methods: {
            // 上一步
            prev() {
                if (this.active > 1) {
                    this.active--
                }
            },
            // 下一步
            next() {
                this.active++
            },
            //提交
            submitFn(){
                console.log("提交了")
            }
        }
  }
</script>
<style scoped>
.app-container{padding: 0px!important}
.content{padding: 20px}
.form>div{margin-top: 60px;}
</style>
